<template>
  <div class="user-management">
    <h2>用户管理</h2>

    <el-card>
      <div class="search-bar">
        <el-input
            placeholder="搜索用户"
            v-model="searchQuery"
            clearable
            style="width: 300px; margin-right: 10px"
        >
          <template #append>
            <el-button icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
        <el-button type="primary" icon="el-icon-plus" @click="handleAddUser">新增</el-button>
      </div>

      <el-table
          :data="currentData"
          style="width: 100%; margin-top: 20px"
          border
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="contactDate" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="province" label="省份" width="100"></el-table-column>
        <el-table-column prop="city" label="市区" width="100"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="postalCode" label="邮编" width="120"></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </div>

       <!-- 新增/编辑用户模态框 -->
      <el-dialog v-model="dialogVisible" title="新增/编辑用户">
        <el-form :model="form" label-width="80px">
          <el-form-item label="日期" :required="true">
            <el-date-picker v-model="form.contactDate" type="datetime" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="姓名" :required="true">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="省份" :required="true">
  <el-select v-model="form.province" placeholder="请选择省份">
    <el-option v-for="item in provinceOptions" :key="item" :label="item" :value="item"></el-option>
  </el-select>
</el-form-item>
          <el-form-item label="城市" :required="true">
  <el-select v-model="form.city" placeholder="请选择城市">
    <el-option v-for="item in cityOptions" :key="item" :label="item" :value="item"></el-option>
  </el-select>
</el-form-item>
      
          <el-form-item label="地址" :required="true">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="邮编" :required="true">
            <el-input v-model="form.postalCode"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>

<div class="dialog-overlay" id="deleteConfirmDialog">
        <div class="dialog">
            <div class="dialog-header">
                <h2 class="dialog-title">提示</h2>
                <button class="close-btn" @click="hideDeleteConfirmDialog">&times;</button>
            </div>
            <div class="dialog-body">
                <div class="dialog-icon">!</div>
                <div class="dialog-message">此操作将永久删除该联系人，是否继续？</div>
            </div>
            <div class="dialog-footer">
                <button class="action-btn cancel-btn" @click="hideDeleteConfirmDialog">取消</button>
                <button class="action-btn confirm-btn" @click="confirmDelete">确定</button>
            </div>
        </div>
    </div>
</template>




<script>
import { mapGetters } from 'vuex';
import axios from 'axios';

export default {
  computed: {
    ...mapGetters(['getUser']),
    // 当前页的数据
    currentData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },


  },
  data() {
    return {
      searchQuery: '',
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      dialogVisible: false,
      isEdit: false,
      currentEditIndex: null,

      // 省市数据
       provinceOptions : [
    '上海', '江苏', '浙江', '安徽', '福建', '北京', '天津', '重庆', '广东', '广西',
    '海南', '河北', '河南', '黑龙江', '湖北', '湖南', '吉林', '江苏', '江西', '辽宁',
    '内蒙古', '宁夏', '青海', '山东', '山西', '陕西', '四川', '台湾', '西藏', '云南',
    '新疆', '香港', '澳门'
],

     cityOptionsMap : {
    上海: ['浦东新区', '徐汇区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '金山', '松江', '青浦区', '奉贤区', '崇明区'],
    江苏: ['南京', '苏州', '无锡', '常州', '徐州', '扬州', '南通', '连云港', '淮安', '盐城', '宿迁', '泰州', '镇江'],
    浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
    安徽: ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '巢湖', '六安', '亳州', '池州', '宣城'],
    福建: ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
    北京: ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云县', '延庆县'],
    天津: ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '蓟县', '静海县', '宁河县'],
    重庆: ['渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '万盛区', '双桥区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '綦江区', '潼南县', '铜梁县', '荣昌县', '璧山县', '大足县', '梁平县', '城口县', '丰都县', '奉节县', '巫山县', '巫溪县', '开县', '云阳县', '忠县', '垫江县', '武隆县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'],
    广东: ['广州', '韶关', '深圳', '珠海', '汕头', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
    广西: ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'],
    海南: ['海口', '三亚', '五指山', '琼海', '文昌', '万宁', '东方', '儋州', '三沙'],
    河北: ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水'],
    河南: ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店'],
    黑龙江: ['哈尔滨', '齐齐哈尔', '鸡西', '鹤岗', '双鸭山', '大庆', '伊春', '佳木斯', '七台河', '牡丹江', '黑河', '绥化', '大兴安岭'],
    湖北: ['武汉', '黄石', '十堰', '宜昌', '襄樊', '鄂州', '荆门', '孝感', '荆州', '黄冈', '咸宁', '随州', '恩施土家族苗族自治州'],
    湖南: ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底'],
    吉林: ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边朝鲜族自治州'],
    辽宁: ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'],
    内蒙古: ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '锡林郭勒盟', '兴安盟', '阿拉善盟', '满洲里', '二连浩特'],
    宁夏: ['银川', '石嘴山', '吴忠', '固原', '中卫'],
    青海: ['西宁', '海东', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
    山东: ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'],
    山西: ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁'],
    陕西: ['西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛'],
    四川: ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'],
    台湾: ['台北', '高雄', '新北', '桃园', '台中', '台南', '新竹', '嘉义', '基隆', '屏东', '苗栗', '台东', '花莲', '宜兰', '澎湖', '金门', '连江'],
    西藏: ['拉萨', '昌都', '山南', '日喀则', '那曲', '阿里', '林芝'],
    云南: ['昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'],
    新疆: ['乌鲁木齐', '克拉玛依', '吐鲁番', '哈密', '昌吉', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏', '克孜勒苏柯尔克孜自治州', '喀什', '和田', '伊犁哈萨克自治州', '塔城', '阿勒泰', '石河子', '阿拉尔', '图木舒克', '五家渠'],
    香港: ['香港岛', '九龙', '新界'],
    澳门: ['澳门半岛', '氹仔岛', '路环岛']
},
      cityOptions: [],

      // 表单
      form: {
        contactDate: '',
        name: '',
        province: '',
        city: '',
        address: '',
        postalCode: '',
        
      }
    };
  },

  watch: {
    'form.province'(newProvince) {
      this.cityOptions = this.cityOptionsMap[newProvince] || [];
      this.form.city = ''; // 清空当前城市
    }
  },

  mounted() {
    this.fetchDataByUsername();
  },

 

  methods: {
    async fetchDataByUsername() {
      try {
        const username = this.getUser.username;
        const res = await axios.get('/api/contacts/user', {
          params: { username },
        });
        this.tableData = res.data;
        this.total = this.tableData.length;
      } catch (err) {
        console.error('获取联系人失败:', err);
      }
    },
//搜索功能，需要实现模糊查询
//这里就是将username和searchQuery发送回去，找到然后返回来，就行
    async handleSearch() {
      console.log('搜索内容:', this.searchQuery);
      //如果是空的话就是不执行的
      if(this.searchQuery=="")
    {
      return ;
    }
    //假如不为空，我们就发到后端去更新数据
    else{
        try {
          const username = this.getUser.username;
          const name=this.searchQuery;
          const res = await axios.get('/api/contacts/search', {
            params: { username,name },
          });
          this.tableData = res.data;
        } catch (err) {
          console.error('获取联系人失败:', err);
        }

    }

    },

    handleAddUser() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.resetForm();
    },

    handleEdit(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.currentEditIndex = index;
      this.form = { ...row };
      this.cityOptions = this.cityOptionsMap[this.form.province] || [];
    },

    // handleDelete(index) {
    //   if (confirm('确定要删除该用户吗？')) {
    //     this.tableData.splice(index, 1);
    //             alert('用户已删除！');
    //         }
    //   //this.tableData.splice(index, 1);
    // },
    handleDelete(index) {
                    this.confirmDeleteIndex = index;
                    document.getElementById('deleteConfirmDialog').style.display = 'flex';
                },
                hideDeleteConfirmDialog() {
                    document.getElementById('deleteConfirmDialog').style.display = 'none';
                },
                confirmDelete() {
                    if (this.confirmDeleteIndex !== -1) {
                      const deletedItem = this.tableData[this.confirmDeleteIndex];
                       const formToSubmit = {
  ...deletedItem,
  username: this.getUser.username,
};

      axios.post('/api/contacts/del', formToSubmit)
    .then(response => {
      console.log('删除成功:', response.data);
      this.$message.success('删除成功');
    })
    .catch(error => {
      console.error('删除失败:', error);
      this.$message.error('删除失败');
    });
                        this.tableData.splice(this.confirmDeleteIndex, 1);
                       

                        this.hideDeleteConfirmDialog();
                    }
                },

    handleSizeChange(val) {
      this.pageSize = val;
    },

    handleCurrentChange(val) {
      this.currentPage = val;
    },

    

    handleSubmit() {
      if (this.isEdit) {
        this.tableData[this.currentEditIndex] = { ...this.form };
        
      } else {
        this.tableData.push({ ...this.form });
      }
      this.dialogVisible = false;
      this.saveUser();
    },

    saveUser() {
      console.log('保存用户信息:', this.form);
      const formToSubmit = {
  ...this.form,
  username: this.getUser.username,
};

      axios.post('/api/contacts/save', formToSubmit)
    .then(response => {
      console.log('保存成功:', response.data);
      this.$message.success('保存成功');
    })
    .catch(error => {
      console.error('保存失败:', error);
      this.$message.error('保存失败');
    });

    },

    resetForm() {
      this.form = {
        contactDate: '',
        name: '',
        province: '',
        city: '',
        address: '',
        postalCode: '',
        
      };
      this.cityOptions = [];
    }
  }
};
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.search-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .dialog {
            background-color: white;
            border-radius: 4px;
            width: 400px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .dialog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .dialog-title {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
        }
        .close-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
        }
        .dialog-body {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .dialog-icon {
            color: #f44336;
            font-size: 24px;
            margin-right: 15px;
        }
        .dialog-message {
        color: #333;
            flex: 1;
        }
        .dialog-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        .cancel-btn {
            background-color: #f5f5f5;
            color: #333;
        }
        .confirm-btn {
            background-color: #4a90e2;
            color: white;
        }
</style>